<template>
	<view class="base-header" :style="containerStyle">
		<slot></slot>
	</view>
</template>

<script setup>
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		defineProps
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	onShow(() => {})

	defineOptions({
		name: 'base-header'
	});

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
	});

	const props = defineProps({
		height: {
			type: [String, Number],
			default: 88
		},
		bgColor: {
			type: String,
		},
	})

	const containerStyle = computed(() => {
		// #ifdef APP
		let h = plus.navigator.getStatusbarHeight() + uni.upx2px(70);
		const headerH = Number(props.height) + h;
		// #endif
		// #ifndef APP
		const headerH = props.height;
		// #endif

		const {
			gradient
		} = JSON.parse(cache.get('themeColor'));

		return {
			background: gradient || props.backColor,
			height: headerH + 'rpx'
		}
	})

	const {
		themeColor,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.base-header {
		overflow: hidden;
		border-radius: 0 0 300rpx 300rpx / 0 0 40rpx 40rpx;
	}
</style>